<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium 测试</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        #cesiumContainer {
            width: 100%;
            height: 100vh;
        }
        .info {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 5px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <div class="info">
        <h3>Cesium 测试页面</h3>
        <p>如果你能看到 3D 地球，说明 Cesium 加载成功！</p>
        <p>你应该能看到：</p>
        <ul>
            <li>3D 地球</li>
            <li>一个红色的测试点在北京</li>
            <li>Cesium 控制面板</li>
        </ul>
    </div>

    <script>
        console.log('开始加载 Cesium...');
        
        try {
            // 初始化 Cesium 查看器
            const viewer = new Cesium.Viewer('cesiumContainer', {
                terrain: Cesium.Terrain.fromWorldTerrain(),
                baseLayerPicker: true,
                geocoder: true,
                homeButton: true,
                sceneModePicker: true,
                navigationHelpButton: true,
                animation: true,
                timeline: true,
                fullscreenButton: true,
                infoBox: true,
                selectionIndicator: true,
            });

            console.log('Cesium 查看器创建成功');

            // 设置初始视角到中国
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 1000000),
                orientation: {
                    heading: 0.0,
                    pitch: -Cesium.Math.PI_OVER_TWO,
                    roll: 0.0
                }
            });

            console.log('初始视角设置完成');

            // 添加一个测试点
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 1000),
                point: { 
                    pixelSize: 20, 
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2
                },
                label: {
                    text: '测试点 - 北京',
                    font: '14pt sans-serif',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineWidth: 2,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset: new Cesium.Cartesian2(0, -40)
                }
            });

            console.log('测试点添加完成');
            console.log('Cesium 测试页面加载完成');

        } catch (error) {
            console.error('Cesium 初始化失败:', error);
            document.body.innerHTML = '<div style="padding: 20px; color: red;"><h1>Cesium 加载失败</h1><p>' + error.message + '</p></div>';
        }
    </script>
</body>
</html>
